<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/3/8
  Time: 14:54
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片剪裁</title>
    <link rel="stylesheet" type="text/css" href="${basePath}/admin/css/cropper.css"/>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .photo{
            width:320px;
            height:200px;
            margin:0 auto;
            box-shadow:2px -2px 43px 10px red;
            position:relative;
        }
        div.file{
            display:inline-block;
            width:100px;
            height:40px;
            line-height:40px;
            position:relative;
            overflow:hidden;
            color:red;
            margin:0 auto;
            border:1px solid lightblue;
            text-align:center;
            left:50%;
            margin-left:-50px;
            margin-top:50px;
            cursor:pointer;
        }
        div.file input{
            position:absolute;
            left:0px;
            top:0px;
            zoom:1;
            filter:alpha(opacity=0);
            opacity:0;
            font-size:20px;
            width:100%;
            height:100%;
        }
        .photo img{
            width:100%;
            height:100%;
        }
        span{
            width:50px;
            height:50px;
            cursor:pointer;
            text-align:center;
            line-height:50px;
            background:#ADD8E6;
        }
        .cancel{
            position:absolute;
            left:10px;
            bottom:10px;
            display:none;
        }
        .sur{
            position:absolute;
            right:10px;
            bottom:10px;
            display:none;
        }
    </style>
    <script src="${basePath}/admin/js/jquery.min.js"></script>
</head>
<body>
<%--<div class="photo">
    &lt;%&ndash;<img src="/" id="pp">&ndash;%&gt;
    <span class="cancel">×</span>
    <span class="sur">√</span>
</div>--%>
<%--<div class="file">上传图片<input type="file" name="myfiles" onchange="readFile(this)"/></div>--%>
<%--<script>
    var imgbase64;
    function readFile(obj){
        var file=obj.files[0];
        var reader=new FileReader();
        reader.readAsDataURL(file)
        reader.onload=function(){
            var lj=reader.result;
            $("#pp").attr("src",lj).show();
            $(".cancel, .sur").show();
            $("#pp").cropper({
                aspectRatio:10/7,
                viewMode:3,
                modal:true,
                guides:false,
                crop:function(e){
                    console.log(e)
                }
            })
        }
    }
    $(".cancel").click(function(){
        $(".cropper-container").hide();
        $("#pp").attr("src","")
        $(".cancel, .sur").hide();
    });
    $(".sur").click(function(){
        var dataURL=$("#pp").cropper("getCroppedCanvas");
        var imgurl=dataURL.toDataURL("image/png",1.0);

        console.log(imgurl)
        $("#pp").attr("src",imgurl);
        $("#pp").removeClass("cropper-hidden");
        $(".cropper-bg").hide();
        $(".cancel, .sur").hide();
    })
</script>--%>
</body>
</html>

